@charset "UTF-8";

//
// @copyright        2017 opencart.cn - All Rights Reserved
// @link             http://www.guangdawangluo.com
// @author           Sam Chen <sam.chen@opencart.cn>
// @created          2017-09-25 15:34:25
// @modified         2017-12-19 12:28:35
//

@media (min-width: 1200px){
    header#header,
    nav#top {
        &> .container{
            width: 1200px;
            padding-left: 0;
            padding-right: 0;
        }
    }
}


nav#top {
    //background: red;
    background-color: $page_top_bg_color;
    color: $page_top_color;
    height: $page_top_height;
    border-bottom: $page_top_border;

    .list-inline {
        > li {
            height: $page_top_height;
            line-height: $page_top_height;
        }
    }

    .btn-group, .list-inline li {
        &:hover {
            .dropdown-menu {
                display: block;
                visibility: visible;
                top: 100%;
            }
        }
    }


    a,button {
        color: $page_top_color;
        font-size: 14px;
        &:hover {
            color: $page_top_bg_color_hover !important;
        }
    }

    .dropdown-menu {
        min-width: 120px;
        button, a {
            padding: 10px;
            line-height: 20px;
            color: #333;
            font-size: 14px;
            &:hover {
                background-color: #F6F6F6;
                color: $page_top_bg_color_hover;
            }
            & > img{
                vertical-align: baseline;
            }
        }
        a{
            text-align: center;
        }
        button{
            text-align: left;
        }
    }

    .pull-left {
        margin-right: 10px;
        .btn-group {
            > button {
                height: $page_top_height;
                padding: 0;
            }
        }
    }

    button:hover{
        .icon-currency{
            background-image: url("/catalog/view/theme/default/image/icon_currency1@2x.png");
        }
        .icon-language{
            background-image: url("/catalog/view/theme/default/image/icon_language@2x.png");
        }
    }

    #top-links a:hover{
        .icon-phone{
            background-image: url("/catalog/view/theme/default/image/icon_Telephone1@2x.png");
        }
        .icon-member{
            background-image: url("/catalog/view/theme/default/image/icon_Personal Center1@2x.png");
        }
        .icon-favor{
            background-image: url("/catalog/view/theme/default/image/icon_Collection3@2x.png");
        }
        .icon-cart{
            background-image: url("/catalog/view/theme/default/image/icon_Shopping Cart5.svg");
        }
        .icon-account{
            background-image: url("/catalog/view/theme/default/image/icon_payment1@2x.png");
        }
        .icon-mobile-phone{
            background-image: url("/catalog/view/theme/default/image/icon_mobile-phone_active.svg");
        }
    }

    .icon-currency{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("/catalog/view/theme/default/image/icon_currency@2x.png");
        background-size: 100%;
        vertical-align: -0.3em;
    }

    .icon-language{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("/catalog/view/theme/default/image/icon_language1@2x.png");
        background-size: 100%;
        vertical-align: -0.3em;
    }

    .icon-phone{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("/catalog/view/theme/default/image/icon_Telephone@2x.png");
        background-size: 100%;
        vertical-align: -0.3em;
    }

    .icon-member{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("/catalog/view/theme/default/image/icon_Personal Center@2x.png");
        background-size: 100%;
        vertical-align: -0.3em;
    }

    .icon-favor{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("/catalog/view/theme/default/image/icon_Collection2@2x.png");
        background-size: 100%;
        vertical-align: -0.3em;
    }

    .icon-cart{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("/catalog/view/theme/default/image/icon_Shopping Cart.svg");
        background-size: 100%;
        vertical-align: -0.3em;
    }

    .icon-account{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("/catalog/view/theme/default/image/icon_payment@2x.png");
        background-size: 100%;
        vertical-align: -0.3em;
    }

    .icon-mobile-phone{
        display: inline-block;
        width: 18px;
        height: 18px;
        background-image: url("/catalog/view/theme/default/image/icon_mobile-phone.svg");
        background-size: 100%;
        vertical-align: -0.3em;
    }

    .dropdown-menu-qrcode{
        width:136px;
        height:136px;
        text-align: center;
        padding-top: 14px;
        padding-bottom: 5px;
        & >img{
            width: 86px;
        }
        & > p{
            margin: 6px 0;
            height:19px;
            font-size:14px;
            line-height:19px;
            color:rgba(51,51,51,1);
        }

        .dropdown-menu-qrcode-logo{
            position: absolute;
            left: 50%;
            top: 56px;
            width: 28px;
            transform: translate(-50%, -50%);
        }
    }
}

header {
    padding: $header_padding;

    h1 {
        margin: 0;
    }

    #search {
        margin: 10px 0;
        width: 300px;
        float: right;

        input {
            padding-right: 35px;
            border-color: #333333;
            height: 40px;
            &:focus{
                //border-color: $brand-primary;
            }
        }

        button {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 99;
            font-size: 14px;
            height: 40px;
            padding: 0;
            background: transparent;
            border: transparent;
            color: $brand-primary;
            &:active {
                box-shadow: none;
            }
            & > img{
                margin: 7px;
                width:26px;
                height:26px;
            }

        }
    }

    #logo {
        @media (max-width: 992px) {
            text-align: center;
        }
        img {
            display: inline-block;
        }
    }

    #cart {
        margin-top: 10px;

        .no-results {
            margin-bottom: 0;
            padding: 16px 6px;
        }

        &:hover {
            .dropdown-menu {
                display: block;
                visibility: visible;
                top: 100%;
            }
        }

        > button {
            padding: 0;
            float: right;
            font-size: 14px;
            background: #fff;
            text-align: right;

            &:active {
                box-shadow: none;
            }

            span {
                border: 1px solid #d4d4d4;
                background-color: #f8f8f8;
                height: 36px;
                line-height: 36px;
                padding: 0 7px;
                display: inline-block;
            }

            i {
                font-size: 16px;
                background: $brand-primary;
                width: 36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                color: #fff;
            }
        }

        .dropdown-menu {
            min-width: 350px;
            padding: 10px;

            li {
                border-bottom: none;

                .name {
                    height: 33px;
                    line-height: 16px;
                    overflow: hidden;
                    display: inline-block;
                }

                &.products {
                    max-height: 400px;
                    overflow: hidden;
                    overflow-y: scroll;

                    a {
                        color: #333;
                    }
                }
            }

            img {
                min-width: 50px;
                transition: none;
            }

            .btn-danger {
                background: #fff;
                color: #555;
                border-color: #eee;
            }
        }
    }
}
